<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3_新增3D</title>
    <style>
        .div1 {
            width: 300px;
            height: 200px;
            border: 1px solid red;
            transform-style: preserve-3d;
            perspective: 100px;
        }

        .div2{
            width: 100px;
            height: 50px;
            margin: 0  auto;
            border: 1px solid red;
            perspective-origin: 200px 200px;
            transform: rotate3d(1,1, 1, 45deg);
        }

    </style>
</head>
<body>
<!--
    3D变换：
        1.开启3D空间
            重要原则：元素进行3D变换，父元素必须要开启3D空间。
                使用transform-style开启3D空间，可选值如下:
                    flat:让子元素位于此元素的二维平面内  -------- 默认值
                    preserve-3d:让子元素位于此元素的三维空间内
            2.设置景深：
                指定观察者与z=0平面的距离，能让发生3D变换的元素，产生透视效果，看起来更加立体。
                    使用perspective属性设置景深，可选值如下：
                        none:不指定透视   ----------默认值
                        length:指定一个长度值，作为透视的距离，不允许负值。
                注意 perspective属性必须设置在父元素上，才能产生透视效果。
            3.3D位移
                3D位移是在2D位移的基础上，可以让元素沿z轴位移。
                    1.给元素添加转换属性 transform
                    2.编写tranform的具体值，可选值如下：
                        translateZ(length):沿z轴位移，length值可以是正数也可以是负数。
                        translate3d: 第一个参数对应x轴位移，第二个参数对应y轴位移，第三个参数对应z轴位移。且均不能省略。
            4.透视点：
                观察者位置，默认的透视点在元素的中心。
                使用perspective-origin属性设置透视点，可选值如下：
                    none:不设置透视点   ----------默认值
                    4000px 400px:指定一个长度值，作为透视点的位置。
                通常情况下，我们不需要设置透视点，因为默认的透视点在中心。
            5.3D旋转
                3D旋转是在2D旋转的基础上，可以让元素沿x轴和y轴旋转。
                1.给元素添加转换属性 transform
                2.编写transform的具体值，可选值如下：
                    rotateX:设置x轴旋转角度，正数表示顺时针旋转，负数表示逆时针旋转。
                    rotateY:设置y轴旋转角度，正数表示顺时针旋转，负数表示逆时针旋转。
                    rotate3d:前3个参数分别表表示坐标轴x,y，z,第4个参数表示旋转的角度，参数不允许省略。
            6.3D 缩放是在 2D 缩放的基础上，可以让元素沿z轴缩放，具体使用方式如下:
                1、先给元案添加 转换属性 transform
                2.编写 transform 的息体值，3D 相关可选值如下:
                    含义
                        scaleZ:设置z轴方向的缩放比例，值为一个数字，1表示不缩放，大于1放大，小于1缩小。
                        scale3d:第1个参数对应x轴，第2个参数对应y轴，第3个参数对应z轴，参数不允许略。
            7.多重变换
                1.多个变换，可以同时使用一个 transform 来编写。
                    transform: translateZ(188px)sca1e2(3)rotateY(4deg):
                注意点:多重变换时，建议最后旋转。
-->
    <div class="div1">1
        <div class="div2">2</div>
    </div>

</body>
</html>